<!--
  ~
  ~   ~ MIT License
  ~   ~
  ~   ~ Copyright (c) 2021-2022 yangrunkang
  ~   ~
  ~   ~ Author: yangrunkang
  ~   ~ Email: yangrunkang53@gmail.com
  ~   ~
  ~   ~ Permission is hereby granted, free of charge, to any person obtaining a copy
  ~   ~ of this software and associated documentation files (the "Software"), to deal
  ~   ~ in the Software without restriction, including without limitation the rights
  ~   ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~   ~ copies of the Software, and to permit persons to whom the Software is
  ~   ~ furnished to do so, subject to the following conditions:
  ~   ~
  ~   ~ The above copyright notice and this permission notice shall be included in all
  ~   ~ copies or substantial portions of the Software.
  ~   ~
  ~   ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~   ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~   ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~   ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~   ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  ~   ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  ~   ~ SOFTWARE.
  ~
  -->

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<body>
<!--用户中心页面左边部分-->
<div th:fragment="user_index_left">
    <div class="card border-0 rounded-3 p-2">
        <div>
            <div th:if="${memberIndexDto} != null and ${memberIndexDto.memberEnhance.member} != null">
                <figure class="figure text-center mb-1 d-block" th:if="!${#strings.isEmpty(memberIndexDto.memberEnhance.member.via)}">
                    <a href="/user/manage/upload-profile-photo" title="我的">
                        <img class="img rounded" th:src="${memberIndexDto.memberEnhance.member.via}" style="width: 90px;height: 90px;"
                             alt="头像"/>
                    </a>
                </figure>
                <div>
                    <p>
                        <img th:src="${ossStatic} + @{/icons/system/email.png}" class="cv-icon-item" alt="邮箱"/></span>
                        <span th:text="${memberIndexDto.memberEnhance.member.email}">yangrunkang@qq.com</span>
                    </p>
                    <p><img th:src="${ossStatic} + @{/icons/system/nickname.png}" class="cv-icon-item" alt="昵称"/> 昵称: <a
                            class="cv-link" th:href="'/profile/'+${memberIndexDto.memberEnhance.member.userId}+'/content'"
                            th:text="${memberIndexDto.memberEnhance.member.userName}"
                            th:title="${memberIndexDto.memberEnhance.member.userName}"></a></p>
                    <p><span><img th:src="${ossStatic} + @{/icons/system/register-time.png}" class="cv-icon-item"
                                  alt="注册时间"/> 注册时间: </span><span
                            th:text="${memberIndexDto.memberEnhance.createDate}">2019.1.2</span></p>
                    <div class="row g-2">
                        <div class="col-lg-12">
                            <img th:src="${ossStatic} + @{/icons/system/jifen2.svg}" class="cv-icon-item" alt="积分数"/> <a
                                href="/user/manage/integral-record" class="cv-link" title="积分数">积分数: <span
                                th:text="${memberIndexDto.memberEnhance.totalIntegral}">2019.1.2</span></a>
                        </div>
                    </div>
                    <div class="border-bottom my-2"></div>
                    <div class="row g-2">
                        <div class="col-lg-6">
                            <a class="cv-link" href="/user/manage/fan" title="粉丝"><img
                                    th:src="${ossStatic} + @{/icons/system/fans.png}" class="cv-icon-item" alt=""/> 粉丝
                                <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark hidden-md"
                                      th:text="${ memberIndexDto.memberEnhance.fansNum}">42</span></a>
                        </div>
                        <div class="col-lg-6">
                            <a class="cv-link" href="/user/manage/attention" title="关注"><img
                                    th:src="${ossStatic} + @{/icons/system/attention.png}" class="cv-icon-item" alt=""/>
                                关注 <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark hidden-md"
                                         th:text="${memberIndexDto.memberEnhance.attentionNum}">42</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="fragments/index::user_manage_fragment(false)"></div>
    <div class="card border-0 rounded-3 p-2 my-2">
        <div class="nav flex-column nav-pills" aria-orientation="vertical">
            <a class="nav-link cv-link" th:href="'/profile/' + ${memberIndexDto.memberEnhance.member.userId}+'/content'" title="我的主页"><img
                    th:src="${ossStatic} + @{/icons/system/profile.svg}" class="cv-icon-item" alt="我的主页"/> 我的主页</a>
            <a class="nav-link cv-link user_manage_apply" href="/user/manage/apply" title="申请管理"><img
                    th:src="${ossStatic} + @{/icons/system/apply.png}" class="cv-icon-item" alt="申请管理"/> 申请管理</a>
        </div>
    </div>
    <!--<div th:include="fragments/index::google_right_ad"></div>-->
</div>


<!--用户设置管理-->
<div th:fragment="user_manage_fragment(show)">
    <div class="card border-0 rounded-3 p-2 my-2"
         th:if="${session?.cv_user_id}">
        <div class="nav flex-column nav-pills" aria-orientation="vertical">
            <div class="m-1 text-black-50" th:if="${show}">快捷操作</div>
            <a class="nav-link cv-link user_manage_content user_manage_draft user_manage_radio user_manage_content-settings"
               href="/user/manage/content" title="内容管理"><img th:src="${ossStatic} + @{/icons/system/manage3.svg}"
                                                             class="cv-icon-item" alt="内容管理"/> 内容管理</a>
            <a class="nav-link cv-link user_manage_message" href="/user/manage/message/un-read" title="消息中心"><img
                    th:src="${ossStatic} + @{/icons/system/message.svg}" class="cv-icon-item" alt="消息中心"/> 消息中心 <span
                    class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
                    th:if="${unReadMegCount} != null and ${unReadMegCount} > 0"
                    th:text="${unReadMegCount}">23</span></a>
            <a class="nav-link cv-link profile_message" th:href="'/profile/' + ${session?.cv_user_id}+'/message'"
               title="留言板"><img th:src="${ossStatic} + @{/icons/system/goutong.png}" class="cv-icon-item" alt="留言板"/>
                留言板</a>
            <a class="nav-link cv-link user_manage_collect" href="/user/manage/collect" title="收藏夹"><img
                    th:src="${ossStatic} + @{/icons/system/collection.png}" class="cv-icon-item" alt="收藏夹"/> 收藏夹</a>
            <a class="nav-link cv-link user_manage_edit-user-info user_manage_bg-style-settings user_manage_upload-profile-photo user_manage_default-content-setting"
               href="/user/manage/edit-user-info" title="设置"><img th:src="${ossStatic} + @{/icons/system/settings.svg}"
                                                                  class="cv-icon-item" alt="设置"/> 设置</a>
        </div>
    </div>
</div>


<!--用户未登录提示-->
<div th:fragment="user_not_login">
    <!--未登录提示-->
    <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert" th:if="!${session?.cv_user_id}">
        您还未登录,请前往登录页面<a th:href="'/login?back='+${#request.servletPath}" class="alert-link" title="登录">登录</a>
        <button type="button" class="btn btn-close rounded-3 bg-gradient-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>


<!--文章数据-->
<div th:fragment="content_data(contentEnhance)">
    <div>
        <img th:data-src="${ossStatic} + @{/icons/system/liulan.png}" class="lazyload cv-icon-small"/> <span
            class="text-black-50 small" th:text="${contentEnhance.contentDataEnhance.contentData.viewNum}"></span>
        <img th:data-src="${ossStatic} + @{/icons/system/content-time.png}" class="lazyload cv-icon-small"/> <span
            class="text-black-50 small" th:text="${contentEnhance.createDate}"></span>
        <span th:if="${contentEnhance.content?.latestCommentUserId} != null">
            <span class="text-black-50 small"><span class="fw-bold text-black-50">·&nbsp;</span>最后回复:</span>
            <a class="cv-link fw-bold text-black-50 small"
               th:href="'/profile/'+${contentEnhance.content?.latestCommentUserId}+'/content'" th:inline="text">[[${contentEnhance?.latestCommentUserName}]]</a>
            <span class="fw-bold text-black-50">&nbsp;·&nbsp;</span>
            <span class="text-black-50 small" th:text="${contentEnhance?.latestCommentDate}"></span>
        </span>
    </div>
</div>

<div th:fragment="tag_cloud">
    <div th:if="!${#lists.isEmpty(cvTagList)}"
         class="card border-0 rounded-3 p-2">
        <div class="lead">网站标签</div>
        <div>
            <a th:each="tag : ${cvTagList}"
               class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark ms-1 cv-link"
               th:href="@{'/tag/'+${tag.tagName}}" th:text="${tag.tagName}+'('+${tag.count}+')'"
               th:title="${tag.tagName}"></a>
        </div>
        <div class="text-black-50 small">* 数据可能会延迟,标签更新时间为每天凌晨一点</div>
    </div>
</div>
<!--文章类型-->
<span th:fragment="content_type(contentEnhance)">
    <a class="cv-link badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
       th:each="type : ${contentTypeList}"
       th:href="${type.url}"
       th:title="${type.name}"
       th:if="${contentEnhance.content.contentType.name() == type.typeName}">[[${type.name}]]</a>
</span>

<!--ListContentDto通用渲染模板-->
<div th:fragment="list_content_dto(listContentDto,fromPage)">
    <div th:if="${#lists.isEmpty(listContentDto.contentEnhanceList)}" th:include="fragments/index::empty_content"></div>
    <div th:if="!${#lists.isEmpty(listContentDto.contentEnhanceList)}">
        <div th:replace="fragments/index::content_list(${listContentDto.contentEnhanceList},${fromPage})"></div>
        <div th:replace="fragments/page::page(${listContentDto.pageDtoList})"></div>
    </div>
</div>

<!--
置顶
-->
<div th:fragment="top_content(pinnedContentEnhance,fromPage)">
    <div class="card border-0 rounded-3 p-2 mb-2"
         th:if="${pinnedContentEnhance?.content != null}">
        <div class="border-bottom pb-1 text-black-50 mb-2">
            <span th:include="fragments/icon::top"></span> 置顶文章
            <span class="text-sm-end border p-1 rounded-2" style="cursor: pointer" th:if="${fromPage == 'manage-content'}"
                  th:onclick="pinned([[${pinnedContentEnhance?.content?.contentId}]],'cancel')">取消</span>
        </div>
        <div th:include="fragments/index::content_media(${pinnedContentEnhance},true)"></div>
    </div>
</div>


<!--
文章列表渲染
list: 文章列表
fromPage: 来自于页面
-->
<div th:fragment="content_list(contentEnhanceList,fromPage)">
    <ul class="list-group list-group-flush">
        <li class="list-group-item p-1" th:each="contentEnhance,ite : ${contentEnhanceList}">
            <div th:if="${contentEnhance.content.contentId != 'google-ad-feed'}"
                 th:include="fragments/index::content_media(${contentEnhance},${fromPage})"></div>
            <div th:if="${contentEnhance.content.contentId == 'google-ad-feed'}" th:include="fragments/index::google_feed_ad"></div>
        </li>
    </ul>
</div>


<!--
电台列表渲染
list: 电台列表列表
fromPage: 来自于页面
-->
<div th:fragment="radio_list(radioEnhanceList,fromPage)">
    <ul class="list-group list-group-flush">
        <li class="list-group-item p-1" th:each="radioEnhance,ite : ${radioEnhanceList}">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div th:if="${radioEnhance.radio.radioId != 'google-ad-feed'}" th:include="fragments/index::radio-item(${radioEnhance})"></div>
                    <div th:if="${radioEnhance.radio.radioId == 'google-ad-feed'}" th:include="fragments/index::google_feed_ad"></div>
                </div>
                <a th:if="${fromPage != 'profile-radio' && radioEnhance.radio.radioId != 'google-ad-feed'}"
                   class="flex-shrink-0 text-black-50 cv-link" th:href="'/profile/' + ${radioEnhance.memberEnhance.member.userId}+'/content'"
                   th:title="${radioEnhance.memberEnhance.member.userName}">
                    <img class="lazyload img rounded rounded-right cv-icon-50" th:data-src="${radioEnhance.memberEnhance.member.via}"
                         th:alt="${radioEnhance.memberEnhance.member.userName}">
                </a>
            </div>
        </li>
    </ul>
</div>


<div th:fragment="content_data_show(userId,userName,via,viewNum,commentNum,createDate,editTimes)">
    <div class="my-1 d-inline-flex text-black-50 small">
        <div class="me-1">
            <a th:inline="text" th:href="'/profile/' + ${userId}+'/content'" class="cv-link text-black-50">
                <img th:data-src="${via}" class="lazyload cv-icon-small img rounded"/> [[${userName}]]
            </a>
            <span class="fw-bold">·</span>
        </div>
        <div class="me-1">
            <img th:data-src="${ossStatic} + @{/icons/system/liulan.png}" class="lazyload cv-icon-small"/>
            [[${viewNum}]]
            <span class="fw-bold">·</span>
        </div>
        <div class="me-1">
            <img th:data-src="${ossStatic} + @{/icons/system/comment-yellow.png}" class="lazyload cv-icon-small"/>
            [[${commentNum}]]
            <span class="fw-bold">·</span>
        </div>
        <div class="me-1">
            <img th:data-src="${ossStatic} + @{/icons/system/content-time.png}" class="lazyload cv-icon-small"/>
            [[${createDate}]]
        </div>
        <div class="me-1 d-none d-xl-block">
            <div data-bs-toggle="collapse" href="#edit-reason"
                 aria-expanded="false" aria-controls="edit-reason"
                 style="cursor: pointer"
                 th:if="${editTimes > 0}">
                <span class="fw-bold me-1">·</span>编辑次数:[[${editTimes}]]
            </div>
        </div>
    </div>
</div>

<!--
from: 来源
      content_list: 首页最新文章
      manage_content: 个人中心文章管理
      manage_draft: 个人中心草稿
-->
<div th:fragment="content_manage(contentEnhance,from)">
    <a th:href="(${contentEnhance.content.status.name()} == 'NORMAL'?'/u/':'/m/') + ${contentEnhance.content.contentId}" th:text="${contentEnhance.content.title}" class="cv-link up-text-overflow text-break" th:title="${contentEnhance.content.title}"></a>
    <span th:replace="fragments/manage::manage_content_tag(${contentEnhance})"></span>

    <span th:if="${from == 'manage_draft'}">
        <span class="badge rounded-3 fw-normal" style="border: 1px solid #e3005f;color: #e3005f;background-color: #ffffff;cursor: pointer" th:onclick="toExistedContent([[${contentEnhance.content.contentId}]])" th:if="${contentEnhance.existedContent}">已有文章的草稿 <i class="bi bi-box-arrow-up-right"></i></span>
    </span>
    <span th:if="${from == 'manage_content'}">
        <span class="badge rounded-3 fw-normal" style="border: 1px solid #DAEDE4;color: #3f7b5a;background-color: #EFF7ED;cursor: pointer" th:onclick="toDraft([[${contentEnhance.content.contentId}]])" th:if="${contentEnhance.hasDraft}">有未完成的草稿 <i class="bi bi-box-arrow-up-right"></i></span>
    </span>
</div>

<div th:fragment="content_media(contentEnhance,fromPage)">
    <div class="d-flex align-items-center">
        <div class="flex-grow-1">
            <div class="mt-0">
                <a th:href="@{'/u/'+${contentEnhance.content.contentId}}" class="cv-link up-text-overflow fs-6 fst-normal"
                   th:title="${contentEnhance.content.title}">[[${contentEnhance.content.title}]]</a>
            </div>
            <div th:replace="fragments/index::content_tag(${contentEnhance},${fromPage})"></div>
            <div class="mb-0" th:if="${contentEnhance.contentDataEnhance.contentData != null}" th:include="fragments/index::content_data(${contentEnhance})"></div>
        </div>
        <div th:if="${fromPage != 'profile-content'}" th:include="fragments/index::content_profile_via(${contentEnhance})"></div>
    </div>
</div>

<div th:fragment="content_tag(contentEnhance,fromPage)">
    <span th:if="!${#lists.isEmpty(contentEnhance.tagDtoList)}">
        <a th:each="tag : ${contentEnhance.tagDtoList}"
           class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark cv-link"
           th:href="@{${fromPage == 'profile-content'?'/profile/'+contentEnhance.content.userId+'/content/':'/tag/'}+${tag.tagName}}" th:text="${tag.tagName}" th:title="${tag.tagName}"></a>
    </span>
    <a th:if="${contentEnhance.newContent}"
       class="badge bg-gradient bg-danger fw-light rounded-3 small d-inline-flex text-white" href="/content/new">新内容</a>
    <a th:if="${contentEnhance.hasLatestEdit}"
       class="badge bg-gradient bg-secondary fw-light rounded-3 small d-inline-flex text-white"
       href="/content/recently-edited">内容有更新 · [[${contentEnhance.editDate}]]</a>
</div>

<div th:fragment="content_profile_via(contentEnhance)">
    <a class="flex-shrink-0 text-black-50 cv-link" th:href="'/profile/' + ${contentEnhance.content.userId}+'/content'"
       th:title="${contentEnhance.memberEnhance.member.userName}">
        <img class="lazyload img rounded rounded-right cv-icon-50" th:data-src="${contentEnhance.memberEnhance.member.via}"
             th:alt="${contentEnhance.memberEnhance.member.userName}">
    </a>
</div>

<!--无内容-->
<div th:fragment="empty_content">
    <div class="text-center m-2">
        <img th:data-src="${ossStatic} + @{/system/empty.png}" class="lazyload"
             style="width: 128px;height: 128px"/>
        <p class="text-black-50 lead">无内容</p>
    </div>
</div>


<!--页面Slogan-->
<div th:fragment="page_banner">
    <div class="card border-0 rounded-3 p-2 mb-2"
         th:if="!${#lists.isEmpty(commonPageIndexDto.listBannerDto.bannerEnhanceList)}">
        <div class="border-bottom text-secondary mb-2">
            <img th:data-src="${ossStatic} + @{/icons/system/recommand.png}" class="lazyload cv-icon-item" alt="广而告之"/>
            广而告之
        </div>
        <div th:each="bannerEnhance,ite : ${commonPageIndexDto.listBannerDto.bannerEnhanceList}">
            <a class="cv-link text-secondary"
               th:href="${bannerEnhance.banner.bannerHref}"
               th:title="${bannerEnhance.banner.bannerTitle} + ' ' + ${#strings.isEmpty(bannerEnhance.banner.bannerDesc)?'':bannerEnhance.banner.bannerDesc}"
               th:utext="${bannerEnhance.banner.bannerTitle}"
            >
            </a>
        </div>
    </div>
</div>

<!--主页菜单-->
<div th:fragment="page_menu">
    <ul class="nav nav-pills">
        <li class="nav-item me-1" th:each="type : ${contentTypeList}">
            <a th:class="'nav-link cv-link small ' + ${type.cssClass}" th:href="${type.url}"
               th:title="${type.name}"><img class="lazyload cv-icon" th:data-src="${type.icon}"/> [[${type.name}]]</a>
        </li>
    </ul>
    <div class="d-xl-none" th:if="!${#lists.isEmpty(commonPageIndexDto.tagEnhanceList)}">
        <div class="border-bottom my-1"></div>
        <ul class="nav nav-pills">
            <!--如果以后涵盖子类，可以使用展开按钮-->
            <li th:each="menu : ${commonPageIndexDto.tagEnhanceList}" class="nav-item me-1">
                <a th:class="'nav-link cv-link small ' + ${menu.tag.tagId}"
                   th:href="@{ ${commonPageIndexDto.currentRootUrl} + '/' + ${menu.tag.tagId}}" th:title="${menu.tag.tagName}"
                   th:inline="text">
                    <img th:data-src="${menu.tag.icon}" class="lazyload cv-icon"/>
                    [[${menu.tag.tagName}]]
                </a>
            </li>
        </ul>
    </div>
</div>

<!--创建短内容的初衷-->
<div th:fragment="why_create_topic">
    <div class="card border-0 rounded-3 p-2 my-2">
        <strong>创建短内容的初衷</strong>
        <div>有时候您可能不想写很长很长的内容,只想写一句话或者几句话</div>
    </div>
</div>


<div th:fragment="apply_tag">
    <a class="cv-link text-black-50" href="/apply-tag" title="没有您想要的标签? 去申请Go!" target="_blank">没有您想要的标签?</a>
</div>


<div th:fragment="without_comment">
    <div>
        <p style="text-align: center;">
            <img th:data-src="${ossStatic} + @{/icons/without_comment.svg}" class="lazyload"
                 style="text-align: center"/>
        <p style="text-align: center;" class="text-black-50 lead">无评论内容,快来评论吧</p>
        </p>
    </div>
</div>

<div th:fragment="global_member_info">
    <div class="card border-0 rounded-3 p-2 mb-2 p-2"
         th:if="!${session?.cv_user_id}">
        <a th:if="!${dailyPoints}" class="cv-link" href="/daily-points" title="签到领积分">
            <span><img th:src="${ossStatic} + @{/icons/system/jifen2.svg}" class="cv-icon-item" alt="签到领积分"/></span>
            <span>签到领积分</span>
        </a>
    </div>
    <div class="card border-0 rounded-3 p-2 mb-2 p-2" th:if="${session?.cv_user_id}">
        <figure class="figure text-center mb-0">
            <a th:href="'/profile/' + ${session?.cv_user_id}+'/content'">
                <img class="img rounded " th:src="${session?.cv_user_via}" style="width: 90px;height: 90px;"/>
            </a>
            <figcaption class="figure-caption">
                <a style="text-align: center;font-size: 14px" th:href="'/profile/' + ${session?.cv_user_id}+'/content'"
                   class="text-black-50 cv-link">
                    [[${session?.cv_user_name}]]
                </a>
            </figcaption>
        </figure>
        <div>
            <!--显示分割线,有数据再显示-->
            <div class="border-bottom my-2" th:if="(${draftCount} != null and ${draftCount} >= 1) or (!${dailyPoints}) or (!${isSettingDefaultContent})"></div>
            <div class="nav flex-column nav-pills" aria-orientation="vertical">
                <a th:if="${draftCount} != null and ${draftCount} >= 1" class="nav-link cv-link" href="/user/manage/draft"
                   th:title="'您有 ' + ${draftCount} + ' 篇草稿未完成'">
                    <span><img class="cv-icon" th:src="${ossStatic} + @{/icons/system/draft.svg}"/> 草稿箱</span>
                    <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
                          th:text="${draftCount}">23</span>
                </a>
                <a th:if="!${dailyPoints}" class="nav-link cv-link" href="/daily-points" title="签到领积分">
                    <span><img th:src="${ossStatic} + @{/icons/system/jifen2.svg}" class="cv-icon-item" alt="签到领积分"/></span>
                    <span>签到领积分</span>
                </a>
                <a th:if="!${isSettingDefaultContent}" class="nav-link cv-link" href="/user/manage/default-content-setting"
                   title="内容喜好设置">
                <span><img th:src="${ossStatic} + @{/icons/system/settings.svg}" class="cv-icon-item"
                           alt="内容喜好设置"/></span>
                    <span>内容喜好设置</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div th:fragment="global_search">
    <div class="card border-0 rounded-3 p-2 mb-2">
        <div class="fw-normal border-bottom mb-2 text-black-50">
            全局搜索 · <span class="badge bg-gradient rounded-3 fw-normal bg-light text-black-50">基于lucene实现</span>
            <div class="spinner-border text-success float-end global-search-tips" role="status"
                 style="height: 20px;width: 20px;display: none" aria-hidden="true"></div>
        </div>
        <div th:include="fragments/index::global_search_clean"></div>
        <div class="mt-1 small text-black-50">
            · 支持: 文章、用户、电台检索
        </div>
    </div>
</div>

<div th:fragment="global_search_clean">
    <div class="ui icon input fluid">
        <input type="text" placeholder="输入关键字" id="cv_navbar_search_input">
        <i class="search link icon" onclick="cvNavbarSearch()"></i>
    </div>
</div>

<div th:fragment="statement(statementEnhance)">
    <div class="alert alert-danger alert-dismissible fade show mb-2" role="alert"
         th:if="${statementEnhance.statement} != null">
        <strong th:text="${statementEnhance.statement.title}" style="font-size:17px"></strong>
        <span th:text="${statementEnhance.statement.statement}"></span>
        <button type="button" class="btn btn-close rounded-3 bg-gradient-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>


<div th:fragment="login_tips">
    <div class="alert alert-danger alert-dismissible fade show mb-2 mt-2" th:if="!${session?.cv_user_id}" role="alert">
        <a th:href="'/login?back='+${#request.servletPath}" class="alert-link" title="登录后方可进行内容发布、评论、留言等操作">登录</a>后方可进行内容发布、评论、留言等操作
        <button type="button" class="btn btn-close rounded-3 bg-gradient-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

<div th:fragment="un_login_radio">
    <div class="alert alert-danger alert-dismissible fade show mb-2" th:if="!${session?.cv_user_id}" role="alert">
        您还未<a th:href="'/login?back='+${#request.servletPath}" class="alert-link" title="您还未登录">登录</a>,登录后方可以发布电台
        <button type="button" class="btn btn-close rounded-3 bg-gradient-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

<div th:fragment="content_not_public_tips">
    <div class="my-1"></div>
    <div>由于文章还未公开:</div>
    <div>
        <ul>
            <li>仅能浏览文章,查看历史评论</li>
            <li>不能进行评论、点赞、分享等操作</li>
        </ul>
    </div>
</div>

<div th:fragment="create_radio">
    <div class="card border-0 rounded-3 p-0 mb-2">
        <div class="nav flex-column nav-pills" aria-orientation="vertical">
            <a class="nav-link cv-link" style="font-size: 16px" href="/radio-station/record" title="在线录制电台">
                <img class="lazyload cv-icon img" th:data-src="${ossStatic} + @{/icons/record.svg}"> 在线录制电台
            </a>
            <a class="nav-link cv-link" style="font-size: 16px" href="/radio-station/create" title="上传电台音频">
                <img class="lazyload cv-icon img" th:src="${ossStatic} + @{/icons/system/upload-radio.svg}"> 上传电台音频
            </a>
        </div>
    </div>
</div>


<div th:fragment="can_not_receive_email">
    <div class="card border-0 rounded-3 p-2 my-2">
        <a class="text-danger fw-normal cv-link" href="/feedback">接收不到邮件?</a>
        <div class="border-bottom"></div>
        <div class="text-black-50 cv-font-sm">* 声明: 我们使用的是阿里的邮件服务,原则上被拦截的可能很小</div>
        <div class="text-black-50 cv-font-sm">* 注意: 如果收不到邮件,很可能被识别为垃圾邮件了,请到邮件垃圾箱中查看</div>
    </div>
</div>


<!--个人中心公共部分-->
<div th:fragment="profile_common">
    <div th:if="${memberIndexDto?.memberEnhance?.statementEnhance?.statement} != null" th:include="fragments/index::statement(${memberIndexDto.memberEnhance.statementEnhance})"></div>
    <div class="alert alert-warning alert-dismissible fade show mb-2" role="alert"
         th:if="${session?.long_time_un_update_profile_photo}">
        <a  href="/user/manage/upload-profile-photo" class="text-dark fw-bold">
            <i class="bi bi-exclamation-triangle-fill"></i> 系统检测到您还未更换头像,请您更换头像,便于其他用户关注到您,从而提升您的影响力
        </a>
        <button type="button" class="btn btn-close rounded-3 bg-gradient-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
    <div class="alert alert-success mb-2 border-0" role="alert" th:if="${session?.is_admin}">
        <h4 class="alert-heading">危险操作区域</h4>
        <button class="ui teal button" th:onclick="handleExceptionUser([[${memberIndexDto.memberEnhance.member.userId}]])">清空用户所有文章,并限制发文</button>
    </div>
    <div class="card border-0 rounded-3 p-2 mb-2">
        <div style="font-size: 40px;font-weight: bold;" class="text-wrap">[[${memberIndexDto.memberEnhance.member.userName}]]</div>
        <span th:include="fragments/member::memberTag(${memberIndexDto.memberEnhance})"></span>
        <div th:switch="${memberIndexDto.memberEnhance.memberExtendEnhance.memberExtend.introduce != null && memberIndexDto.memberEnhance.memberExtendEnhance.memberExtend.introduce != ''}">
            <div style="font-size: 17px;color: #7D8B99" class="text-wrap" th:case="true"
                 th:text="${memberIndexDto.memberEnhance.memberExtendEnhance.memberExtend.introduce}"></div>
            <div style="font-size: 17px;color: #7D8B99" class="text-wrap" th:case="false">该作者个人简介未填写</div>
        </div>
    </div>
</div>

<div th:fragment="viewList(viewHistoryEnhanceList)">
    <div class="card border-0 rounded-3 p-2 my-2"
         th:if="!${#lists.isEmpty(viewHistoryEnhanceList)}">
        <div class="small text-black-50">以下用户访问过:</div>
        <span>
            <a th:each="viewHistoryEnhance : ${viewHistoryEnhanceList}" class="cv-link" th:href="'/profile/'+${viewHistoryEnhance.viewHistory.viewerUserId}+'/content'">
                <img th:if="!${#strings.isEmpty(viewHistoryEnhance.viewerUserVia)}" class="lazyload img rounded cv-icon" th:data-src="${viewHistoryEnhance.viewerUserVia}" th:alt="${viewHistoryEnhance.viewerUserName}"/>
            </a>
        </span>
    </div>
</div>

<!--个人中心公共部分-->
<div th:fragment="profile_right">
    <div class="card border-0 rounded-3 p-2">
        <div>
            <figure class="figure text-center mb-0 d-block" th:if="!${#strings.isEmpty(memberIndexDto.memberEnhance.member.via)}">
                <img class="lazyload img rounded" th:data-src="${memberIndexDto.memberEnhance.member.via}"
                     style="width: 90px;height: 90px;"/>
            </figure>
            <div>
                <div class="mt-2">拥有 <a class="cv-link active"
                                        th:href="'/profile/'+${memberIndexDto.memberEnhance.member.userId}+'/fans'"><span
                        class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
                        th:text="${memberIndexDto.memberEnhance.fansNum}">42</span></a> 个粉丝
                </div>
                <div class="mt-2">关注 <a class="cv-link"
                                        th:href="'/profile/'+${memberIndexDto.memberEnhance.member.userId}+'/attention'"><span
                        class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
                        th:text="${memberIndexDto.memberEnhance.attentionNum}">42</span></a> 个作者
                </div>
                <div class="mt-2">一共写了 <a class="cv-link active"
                                          th:href="'/profile/'+${memberIndexDto.memberEnhance.member.userId}+'/content'"><span
                        class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
                        th:text="${memberIndexDto.memberEnhance.totalContentNum}">42</span></a> 篇文章
                </div>
                <div class="mt-2">于 <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark"
                                          th:text="${memberIndexDto.memberEnhance.createDateShort}">42</span> 加入Upupor大家庭
                </div>
                <div class="mt-2" th:if="!${#strings.isEmpty(memberIndexDto.memberEnhance.lastLoginDate)}" th:inline="text">
                    最近活跃: <span class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark">[[${memberIndexDto.memberEnhance.lastLoginDate}]]</span>
                </div>
                <div class="mt-2 mb-1" th:inline="text">积分: <span
                        class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark">[[${memberIndexDto.memberEnhance.totalIntegral}]]</span>
                </div>
            </div>
            <!--关注按钮-->
            <div th:if="${session?.cv_user_id != memberIndexDto.memberEnhance.member.userId} and !${memberIndexDto.currUserIsAttention}"
                 class="mb-1">
                <button class="btn rounded-3 bg-gradient btn-warning btn-sm w-100"
                        th:onclick="attentionAuthor([[${memberIndexDto.memberEnhance.member.userId}]])" id="attention_btn">
                    <span th:text="${memberIndexDto.currUserIsAttention} == false ? '关注作者':'已关注作者'"
                          id="attention_tips"></span>
                </button>
            </div>
        </div>
    </div>
    <div th:if="${session?.cv_user_id == memberIndexDto.memberEnhance.member.userId}"
         th:include="fragments/index::user_manage_fragment(true)"></div>
    <!---->
    <div class="card border-0 rounded-3 p-2 my-2">
        <div class="lead mb-1">内容标签</div>
        <div th:if="${#lists.isEmpty(memberIndexDto.tagEnhanceList)}" th:include="fragments/index::empty_content"></div>
        <div>
            <a th:if="!${#lists.isEmpty(memberIndexDto.tagEnhanceList)}"
               th:each="tagEnhance : ${memberIndexDto.tagEnhanceList}"
               class="badge bg-gradient rounded-3 fw-normal bg-warning text-dark cv-link ms-1"
               th:href="@{'/profile/' + ${memberIndexDto.memberEnhance.member.userId} + '/content/'+${tagEnhance.tag.tagName}}"
               th:text="${tagEnhance.tag.tagName}" th:title="${tagEnhance.tag.tagName}"></a>
        </div>
        <div class="cv-font-sm text-black-50 mt-3">* 标签取自作者发布的内容</div>
    </div>
    <!--访问者-->
    <div th:include="fragments/index::viewList(${memberIndexDto.viewHistoryEnhanceList})"></div>
    <div th:if="${session?.cv_user_id == memberIndexDto.memberEnhance.member.userId}"
         class="card border-0 rounded-3 p-2 my-2">
        <a class="text-secondary" href="/view/history"><span th:include="fragments/icon::view_record"></span>我的浏览记录</a>
    </div>
    <div th:include="fragments/social::social_box('profile/','主页',${memberIndexDto.memberEnhance.member.userId},${memberIndexDto.memberEnhance.member.userName})"></div>
    <div th:include="fragments/index::global_search"></div>
    <div th:include="fragments/index::google_right_ad"></div>
</div>

<!--文章详情-右侧-纵向广告-->
<div th:fragment="google_right_ad">
    <div class="card border-0 rounded-3 mb-2"
         th:if="!${#strings.isEmpty(adSwitch)} and ${adSwitch} == '1' and ${adSwitchRight} == '1'">
        <div class="card border-0-body border-0 p-0 float-ads-vertical">
        </div>
        <div class="card-footer bg-white p-1">
            <a href="/about-ad" class="text-black-50 small">关于广告</a>
        </div>
    </div>
    <div class="card border-0 rounded-3 mb-2"
         th:if="!${#strings.isEmpty(adSwitch)} and ${adSwitch} == '0' and ${adSwitchRight} == '0'">
        <div class="card border-0-body border-0 p-0 float-ads-vertical">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- 文章详情-右侧-纵向广告 -->
            <ins class="adsbygoogle"
                 style="display:block"
                 th:data-ad-client="${googleClient}"
                 th:data-ad-slot="${googleRightSlot}"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
        <div class="card-footer bg-white p-1">
            <a href="/about-ad" class="text-black-50 small">关于广告</a>
        </div>
    </div>

</div>


<!--列表信息流广告-->
<div th:fragment="google_feed_ad">
    <div class="card border-0 border-0 p-2 mb-2 float-ads-feed"
         th:if="!${#strings.isEmpty(adSwitch)} and ${adSwitch} == '1'">
    </div>
    <div class="float-ads-feed" th:if="!${#strings.isEmpty(adSwitch)} and ${adSwitch} == '0'">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-format="fluid"
             data-ad-layout-key="-hz+6+19-53+54"
             th:data-ad-client="${googleClient}"
             th:data-ad-slot="${googleFeedSlot}"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
</div>


<div th:fragment="radio-item(radioEnhance)">
    <div class="mt-0">
        <a th:href="@{'/r/'+${radioEnhance.radio.radioId}}" class="cv-link up-text-overflow fs-6 fst-normal"
           th:title="${radioEnhance.radio.radioIntro}" th:text="${radioEnhance.radio.radioIntro}"></a>
    </div>
    <div>
        <img th:data-src="${ossStatic} + @{/icons/system/liulan.png}" class="lazyload cv-icon-small"/> <span
            class="text-black-50 small" th:text="${radioEnhance?.contentDataEnhance?.contentData?.viewNum}">0</span>
        <img th:data-src="${ossStatic} + @{/icons/system/content-time.png}" class="lazyload cv-icon-small"/> <span
            class="text-black-50 small" th:text="${radioEnhance?.createDate}"></span>
        <span th:if="${radioEnhance.radio?.latestCommentUserId} != null">
            <span class="text-black-50 small"><span class="fw-bold">·&nbsp;</span>最后回复:</span>
            <a class="cv-link fw-bold text-black-50 small"
               th:href="'/profile/'+${radioEnhance.radio?.latestCommentUserId}+'/content'" th:inline="text">[[${radioEnhance?.latestCommentUserName}]]</a>
            <span class="fw-bold text-black-50">·</span>
            <span class="text-black-50 small" th:text="${radioEnhance?.latestCommentDate}"></span>
        </span>
    </div>
</div>


<div th:fragment="foot_left(target)">
    <!--    <div class="card border-0 rounded-3 p-2 mb-2">-->
    <!--        <div class="nav flex-column nav-pills" aria-orientation="vertical">-->
    <!--            <a class="cv-link text-black-50" href="/our-home"><span th:include="fragments/icon::earth"></span>暗淡蓝点</a>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="card border-0 rounded-3 p-2 mb-2">
        <div class="nav flex-column nav-pills" aria-orientation="vertical">
            <!--            <a th:class="${target == 'business-cooperation'?'nav-link cv-link active':'nav-link cv-link'}" href="/business-cooperation" title="商务合作"><i class="bi bi-briefcase" style="color:#ce7900"></i> 商务合作</a>-->
            <a th:class="${target == 'apply-ad'?'nav-link cv-link active':'nav-link cv-link'}" href="/apply-ad"
               title="广告位"><i class="bi bi-badge-ad" style="color:#ce7900"></i> 广告位</a>
            <a th:class="${target == 'apply-consultant'?'nav-link cv-link active':'nav-link cv-link'}"
               href="/apply-consultant" title="咨询申请"><i class="bi bi-people-fill" style="color:#ce7900"></i> 咨询服务</a>
            <a th:class="${target == 'apply-tag'?'nav-link cv-link active':'nav-link cv-link'}" href="/apply-tag"
               title="标签申请"><i class="bi bi-tag" style="color:#ce7900"></i> 标签申请</a>
        </div>
    </div>

    <div class="card border-0 rounded-3 p-2">
        <div class="nav flex-column nav-pills" aria-orientation="vertical">
            <a th:class="${target == 'vision'?'nav-link cv-link active':'nav-link cv-link'}" href="/vision"
               title="愿景"><img th:data-src="${ossStatic} + @{/icons/system/footer/vision.svg}"
                               class="lazyload cv-icon"/> 愿景</a>
            <a th:class="${target == 'brand-story'?'nav-link cv-link active':'nav-link cv-link'}" href="/brand-story"
               title="品牌故事"><img th:data-src="${ossStatic} + @{/icons/system/footer/brand-story.svg}"
                                 class="lazyload cv-icon"/> 品牌故事</a>
            <a th:class="${target == 'team'?'nav-link cv-link active':'nav-link cv-link'}" href="/developer" title="技术"><i
                    class="bi bi-code-square" style="color:#ce7900"></i> 开发者</a>
            <a th:class="${target == 'thanks'?'nav-link cv-link active':'nav-link cv-link'}" href="/thanks"
               title="致谢"><img th:data-src="${ossStatic} + @{/icons/system/footer/thanks.svg}"
                               class="lazyload cv-icon"/> 致谢</a>
            <!--    <a th:class="${target == 'logo-design'?'nav-link cv-link active':'nav-link cv-link'}" href="/logo-design" title="logo设计"><img th:data-src="${ossStatic} + @{/icons/system/footer/design.svg}" class="lazyload cv-icon" />  logo设计</a>-->
            <a th:class="${target == 'check-info'?'nav-link cv-link active':'nav-link cv-link'}" href="/about-ad"
               title="关于广告"><img th:data-src="${ossStatic} + @{/icons/system/footer/ad.svg}" class="lazyload cv-icon"/>
                关于广告</a>
            <a th:class="${target == 'pinned'?'nav-link cv-link active':'nav-link cv-link'}" href="/pinned"
               title="关于置顶"><span th:include="fragments/icon::top"></span> 关于置顶</a>
        </div>
    </div>
</div>

<!--创建文章的URL组件-->
<div th:fragment="create_content_url(createContentDesc)">
    <div class="card border-0 rounded-3 p-1 mb-2"
         th:if="${createContentDesc != null}">
        <div class="nav flex-column nav-pills" aria-orientation="vertical">
            <a class="nav-link cv-link text-secondary" th:href="${createContentDesc.href}">
                <img class="lazyload cv-icon" th:src="${createContentDesc.icon}"/> [[${createContentDesc.desc}]]
            </a>
        </div>
    </div>
</div>


<div th:fragment="listContentDtoSearch(listContentDto,tag)">
    <div class="alert alert-primary alert-dismissible fade show mb-2 from-content-to-draft" role="alert" th:if="${listContentDto.total}>0" style="display: none">
        按内容id检索[[${tag}]],共搜到了<span style="font-weight: bolder" th:text="${listContentDto.total}"></span>条数据
        <button type="button" class="btn btn-close rounded-3 bg-gradient-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

</body>
</html>
